<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        size="small"
        v-model="listQuery.name"
        style="width: 200px"
        class="filter-item"
        placeholder="荣誉名称"
        clearable
      />
      <el-select
        size="small"
        v-model="listQuery.fixed"
        default-first-option
        style="width: 180px"
        placeholder="展示方式"
        clearable
      >
        <el-option
          v-for="(item, index) in recomArr"
          :key="index"
          :label="item.fixed"
          :value="item.value"
        />
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.status"
        default-first-option
        style="width: 180px"
        placeholder="状态"
        clearable
      >
        <el-option
          v-for="(item, index) in statusArr"
          :key="index"
          :label="item.status"
          :value="item.value"
        />
      </el-select>

      <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        size="small"
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="edit"
        @click="showCreate"
      >
        添加
      </el-button>
    </div>

    <div class="table-container">
      <el-table
        key="tableKey"
        :data="list"
        v-loading="listLoading"
        element-loading-text="加载中"
        border
        fit
        stripe
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
          background: '#E3ECFB',
          color: '#303133',
          fontWeight: '500'
        }"
      >
        <el-table-column align="left" label="留言板">
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
            <el-divider direction="vertical"></el-divider>

            <span>{{ scope.row.name }}</span>
            <el-divider direction="vertical"></el-divider>

            <span>{{ scope.row.msg }}</span>
            <el-row :gutter="12">
              <el-col>
                <el-card shadow="hover">
                  {{ scope.row.content }}
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="never">
                  从不显示
                </el-card>
              </el-col>
            </el-row>
            <div>
              <!-- <span>头上一片晴天，心中一个想念</span> -->
              <!-- <el-divider content-position="left">少年包青天</el-divider> -->
              <!-- <span>饿了别叫妈, 叫饿了么</span> -->
              <!-- <el-divider><i class="el-icon-mobile-phone"></i>
        
            </el-divider>   -->
              <!-- <span>为了无法计算的价值</span> -->
              <!-- <el-divider content-position="right">回复</el-divider> -->
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column align="center" label="aa" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image style="width: 30px;" :src="scope.row.cover" :preview-src-list="scope.row.imglist"></el-image>
          </template>
        </el-table-column> -->

        <!-- // <el-table-column align="center" label="状态" width="120">
        //   <template slot-scope="scope">
        //      <el-tag :type="scope.row.status==1 ? 'success' : 'warning'">
        //     <span>{{ scope.row.status == 1?'已显示':'已停用' }}</span>  </el-tag>
        //   </template>
        // </el-table-column> -->
        <!-- <el-table-column align="center" label="cc" width="120px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.fixed" active-color="#13ce66" :inactive-value="0" :active-value="1" inactive-color="grey" @change="changeFixedStatus(scope.row,scope.row.fixed)">
            </el-switch>             
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center" label="排序"  class-name="overflow-on" width="120">
          <template slot-scope="scope">
            {{ scope.row.sort }}
            <el-input size="small" v-if="scope.row.show == 1"  max="50" v-model="scope.row.sort" />
          </template>
 
        </el-table-column> -->

        <!-- <el-table-column align="center" label="更新时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.updated_at }}</span>
          </template>
        </el-table-column> -->

        <!-- <el-table-column align="center" label="操作" width="320">
          <template slot-scope="scope">
            <el-button plain v-if="scope.row.show == 1" size="small" @click="orderHandleDo(scope.row)">保存</el-button>
            <el-button plain v-else size="small" @click="orderHandle(scope.row)">排序</el-button>
            <el-button plain size="small" type="primary" @click="handleEdit(scope.row, 'edit')">编辑</el-button>
            <el-button plain v-if="scope.row.status == 1" size="small" type="warning" @click="changeStatus(scope.row, 0)">去停用</el-button>
            <el-button plain v-else size="small" type="success" @click="changeStatus(scope.row, 1)">去发布</el-button>
            <el-button plain size="small" type="danger" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="pagination-container text-right">
      <el-pagination
        background
        :total="pagination.total"
        :current-page="listQuery.page"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form
        class="small-space"
        :model="temp"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="荣誉名称" required>
          <el-input
            size="small"
            v-model="temp.name"
            maxlength="32"
            width="100px"
          ></el-input>
        </el-form-item>

        <el-form-item label="荣誉图片" required>
          <el-upload
            class="avatar-uploader"
            :action="uploadPath"
            :headers="header"
            :show-file-list="false"
            :on-success="handleImageSuccess"
          >
            <img v-if="temp.cover" :src="temp.cover" style="width: 100px" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注信息" required>
          <el-input
            type="textarea"
            :rows="2"
            size="small"
            v-model="temp.msg"
            maxlength="32"
            width="100px"
          ></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number size="small" v-model="temp.sort" />
          <el-tag type="warning"> 说明：正序排列，显示顺序由小到大显示</el-tag>
        </el-form-item>
        <el-alert
          :closable="false"
          title="温馨提示：图片尽量压缩后上传，尽量不超过1M"
          type="error"
        ></el-alert>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          @click="create"
          >确 定</el-button
        >
        <el-button v-else type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { List, Save, Del, Status, Sort, FixedStatus } from "@/api/comment";
import { getToken } from "@/utils/auth";
import { uploadPath } from "@/utils/common";

export default {
  data() {
    return {
      list: null,
      changeIndex: -1,
      pagination: {},
      dialogFormVisible: false,
      temp: {
        name: "",
        cover: "",
        status: "",
        sort: 0,
        fixed: ""
      },
      listQuery: {
        page: 1,
        limit: 10,
        name: "",
        status: "",
        fixed: ""
      },
      recomArr: [
        { fixed: "固定展示", value: 1 },
        { fixed: "轮播展示", value: 0 }
      ],
      statusArr: [{ status: "显示", value: 1 }, { status: "停用", value: 0 }],
      uploadPath: uploadPath,
      dialogStatus: null,
      dialogTitle: "",
      header: {
        Authorization: getToken()
      }
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  created() {
    this.getList();
  },

  methods: {
    getList() {
      this.listLoading = true;
      List(this.listQuery).then(response => {
        var data = response.data;
        this.list = data.data;
        //图片相对路径处理
        //this.list.forEach(item=>{
        //  item.image_path=process.env.VUE_APP_BASE_PIC +  item.image_path

        //})

        this.pagination = data;
        //图片放大处理，声明一个数组，遍历一遍
        this.list.forEach(e => {
          e.imglist = [];
          e.imglist.push(e.cover);
        });
      });

      this.listLoading = false;
    },

    handleFilter() {
      //console.log(this.listQuery)
      this.listQuery.page = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },

    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },

    changeStatus(row, status) {
      Status({ id: row.id, status: status }).then(response => {
        row.status = status;
        this.$message.success("操作成功！");
        this.getList();
      });
    },

    orderHandle(row) {
      row.show = 1;
    },

    changeFixedStatus(row, data) {
      const _this = this;
      FixedStatus({ id: row.id, fixed: data }).then(response => {
        row.fixed = data;
        this.$message.success(response.msg);
        this.getList();
      });
    },

    orderHandleDo(row) {
      Sort({ id: row.id, sort: row.sort }).then(response => {
        row.show = 0;
        this.$message.success(response.msg);
        this.getList();
      });
    },

    showCreate() {
      this.temp = {
        name: "",
        cover: "",
        status: 0,
        sort: 0
      };
      this.dialogTitle = "添加";
      this.dialogStatus = "create";
      (this.dialogTitle = "添加"), (this.dialogFormVisible = true);
    },

    handleEdit(row, status) {
      this.dialogTitle = "编辑";
      this.dialogFormVisible = true;
      this.temp = row;
      this.dialogStatus = status;
    },

    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //console.log(row.id);
          Del({ id: row.id }).then(response => {
            if (response.code === 0) {
              this.$message({
                message: response.msg,
                type: "success"
              });
              this.dialogFormVisible = false;
              this.getList();
            } else {
              this.$message({
                message: response.msg,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    handleImageSuccess(res, file) {
      if (res.code === 0) {
        this.temp.cover = res.data.filepath;
        //图片相对路径处理
        //this.temp.image_path=process.env.VUE_APP_BASE_PIC +  this.temp.image_path
        this.temp.cover = this.temp.cover;
        // uploadPath = uploadPath.this.temp.image_path;

        this.$message.success("上传成功！");
      } else {
        this.$message.error(res.msg);
      }
    },
    update() {
      Save(this.temp).then(response => {
        if (response.code === 0) {
          this.$message({
            message: response.msg,
            type: "success"
          });
          this.dialogFormVisible = false;
          //this.fetchSetting()
          this.getList();
        } else {
          this.$message({
            message: response.msg,
            type: "error"
          });
        }
      });
    },
    create() {
      Save(this.temp).then(response => {
        if (response.code === 0) {
          this.$message({
            message: response.msg,
            type: "success"
          });
          this.dialogFormVisible = false;
          //this.fetchSetting()
          this.getList();
        } else {
          this.$message({
            message: response.msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style>
/* .table-container {
  margin: 20px 0;
} */
.alert-container {
  margin: 20px 0;
}
</style>
